<template>
  <!-- 线下活动详情 -->
  <div class="eventDetails">
    <MyHead title="线下活动详情"></MyHead>
    <div class="box" :style="{ backgroundImage: `url(${back_image})` }">
      <div class="title-box">
        <div class="title">{{ signinList.title }}</div>
        <div class="events-time">
          活动时间：{{ signinList.start_time_text }}~{{
            signinList.end_time_text
          }}
        </div>
      </div>
      <!-- <div class="content-box" v-html="signinList.content"></div> -->
      <div class="content-box" v-html="content"></div>

      <div class="btn-style flexc" v-if="sign_successfully != 1">
        <van-button round type="info" color="#F57373" @click="goJoin">
          扫码签到
        </van-button>
      </div>
    </div>
  </div>
</template>
<script src="../../../public/js/jweixin-1.6.0"></script>
<script>
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      s: "", //单位Code-活动ID
      signinList: {},
      page_url: "",
      wxAppid: "",
      back_image: "", //背景图
      sign_successfully: "", // 扫码签到成功
      content: "", //富文本
    };
  },
  computed: {},
  methods: {
    /*获取详情信息*/
    async getSigninInfo() {
      let res = await this.$ajax.signinInfo({
        openid: this.openid,
        s: this.s,
      });
      if (res.code == 1) {
        this.signinList = res.msg;
        // this.back_image = this.sourceURL + res.msg.back_image;
        this.content = res.msg.content; //富文本
        // 富文本中的图片处理
        this.$nextTick(() => {
        const images = document.querySelectorAll("img");
        images.forEach((image) => {
          const src = image.getAttribute("src");
          // 在这里根据接口地址和图片地址进行拼接
          const newSrc = this.getFullImageUrl(src);
          image.setAttribute("src", newSrc);
        });
      });
      } else {
        this.$toast(res.msg);
      }
    },
    /*富文本地址处理*/ 
    getFullImageUrl(src) {
      // 在这里根据接口地址和图片地址进行拼接
      return this.sourceURL + src;
    },
    /*扫码签到*/
    async goJoin() {
      var qd = this.openid + this.s;
      const that = this;
      wx.ready(function () {
        //  wx.scanQRCode();
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， 为1 有返回取1
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果  sign 获取到sign
            var sign = result.split("?sign=")[1]; // 码
            console.log(sign);
            if (sign == that.s) {
              that.onSign(); //签到
              return false;
            } else {
              that.$toast("活动匹配不对哟！");
            }
          },
        });
      });
      wx.error(function (err) {
        console.log(err);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    },
    /*签到*/
    async onSign() {
      let res = await this.$ajax.doSingin({
        openid: this.openid,
        s: this.s,
      });
      if (res.code == 1) {
        this.$toast(res.msg);
        this.sign_successfully = "1";
      } else {
        this.$toast(res.msg);
      }
    },
    /*获取jsSdk*/
    async todoGetSign() {
      let res = await this.$ajax.getJsSdkSign({
        openid: this.openid,
        s: this.s,
        page_url: this.page_url,
      });
      if (res.code == 1) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appid, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["scanQRCode", "chooseImage"], // 必填，需要使用的JS接口列表
        });
      }
    },

    /*用于用户扫码进入时没有openid 的情况*/
    /*获取AppID*/
    async getWxAppid() {
      let res = await this.$ajax.WechatParam();
      if (res.code == 1) {
        this.wxAppid = res.data.appid;
        var expiration = new Date();
        expiration.setTime(expiration.getTime() + 1.5 * 60 * 60 * 1000); // 设置1个半小时
        $.cookie("appid", res.data.appid, { expires: expiration });
        this.getOpenid(); //正式
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);

      return null;
    },
    /*openid*/
    async getOpenid() {
      if (!this.wxAppid || this.wxAppid == undefined) {
        Toast.fail("缺少参数");
        return false;
      }
      localStorage.setItem("redirect_uri", location.href.split("#")[1]);
      var scope = "snsapi_base"; //snsapi_userinfo；snsapi_base
      var jumpUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        this.wxAppid +
        "&redirect_uri=" +
        location.href.split("#")[0] +
        "&response_type=code&scope=" +
        scope +
        "&state=STATE#wechat_redirect";

      this.code = this.getUrlParam("code");

      if (!this.code) {
        window.location = jumpUrl;
        return;
      } else {
        let res = await this.$ajax.weChatLogin({
          code: this.code,
          scope: scope,
        });
        if (res.code == 1) {
          var expiration = new Date();
          expiration.setTime(expiration.getTime() + 1.5 * 60 * 60 * 1000); // 设置1个半小时
          $.cookie("openid", res.data.openid, { expires: expiration });
          this.openid = res.data.openid;
          this.$nextTick(() => {
            // 重新重定型 url;
            window.location =
              window.location.origin +
              window.location.pathname +
              localStorage.getItem("redirect_uri");
            return;
          });
        } else {
          console.log("获取失败");
        }
      }
    },

  },
  mounted() {
    // 没有openid
    // 直接扫码 线下活动
    if (!this.openid || this.openid == undefined) {
      this.getWxAppid();
    } else {
      // 有openid

      this.page_url = window.location.origin + window.location.pathname;
      this.s = this.$route.query.s;

      this.getSigninInfo();
      this.todoGetSign(); //jsSdk

      
    }
  },
};
</script>
      
<style lang="scss" >
.eventDetails {
  background-color: #f8f8f8;
  width: 100%;
  min-height: 100vh;
  position: absolute;
  box-sizing: border-box;

  .box {
    width: 100%;
    min-height: calc(100vh - 50px);
    background-size: 100% 100%;
    padding-bottom: 40px;
    box-sizing: border-box;
    padding: 10px;
  }
  .title-box {
    line-height: 30px;
    border-bottom: 1px solid #bbbbbb;
    // margin: 10px;
    .title {
      color: rgba(16, 16, 16, 1);
      font-size: 20px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .events-time {
      color: rgba(153, 153, 153, 1);
      font-size: 14px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
  }
  .content-box {
    box-sizing: border-box;
    padding: 10px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    background: none !important;
    p {
      background: transparent !important;
      color: #524f4f;
      font-size: 16px;
    }
    span {
      background: transparent !important;
    }
    img {
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;
      background: none;
    }
    section {
      background: none !important;
    }
    strong {
      background: none !important;
    }
  }
  .btn-style {
    padding-bottom: 20px;
  }
}
</style>